<template>
  <div id="app">
    <router-view @login="loginDirect" @logout="logoutDirect" />

    <v-snackbar v-model="snackbar" :timeout="timeout" top >
      {{ snackbarText }}
      <v-btn color="pink" flat round @click="snackbar = false">
        Close
      </v-btn>
    </v-snackbar>
  </div>
</template>


<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Cookie from "js-cookie";
// import login from './api/login';
import { buildMenu, deepcopy } from "@/utils/commonUtils";

import { fullRoutes } from "@/routes/routes";
declare const $Vue: any;

@Component({
  components: {},
  computed: {}
})
export default class App extends Vue {
  private menuTree: any = null;
  private userData: any = null;

  private showProgress: boolean = false;
  private progressText: string = "Loading...";

  private snackbarText: string = "";

  private snackbar: boolean = false;
  private timeout: number = 4000;

  protected created() {
    this.signin();
  }

  protected mounted() {
    this.registerProgress();
    this.registerSnackbar();
  }

    // 注册加载进度
  private registerProgress() {
    const $this = this;
    $Vue.$on("show_progress", (data: { message: string }) => {
      $this.showProgress = true;
      if (data.message) {
        $this.progressText = data.message;
      } else {
        $this.progressText = "Loading...";
      }
    });
    $Vue.$on("hide_progress", () => {
      this.showProgress = false;
    });
  }

  // 注册提示条
  private registerSnackbar() {
    const $this = this;
    $Vue.$on("snackbar", (data: { text: string }) => {
      this.snackbarText = data.text;
      this.snackbar = true;
    });
  }

  private getPermission(userInfo: any) {}

  private setInterceptor(resourcePermission: any) {}

  private getRoutes(userInfo: any) {
    if (!userInfo.menus) {
      return console.warn(userInfo);
    }

    let allowedRouter: Array<any> = [];
    let arrayMenus = buildMenu(userInfo.menus);

    let hashMenus: any = {};
    let setMenu2Hash = function(array: Array<any>, base?: Array<any>) {
      if (array) {
        array.map((key: any) => {
          if (key.route) {
            let hashKey = ((base ? base + "/" : "") + key.route).replace(
              /^\//,
              ""
            );
            hashMenus["/" + hashKey] = true;
            if (Array.isArray(key.children)) {
              setMenu2Hash(key.children, key.route);
            }
          }
        });
      }
    };

    setMenu2Hash(arrayMenus);

    Object.defineProperty(this.$root, "hashMenus", hashMenus);

    let findLocalRoute = function(array: any, base?: any) {
      let replyResult: any = [];
      array.forEach(function(route: any) {
        let pathKey = (base ? base + "/" : "") + route.path;
        if (hashMenus[pathKey]) {
          if (Array.isArray(route.children)) {
            route.children = findLocalRoute(route.children, route.path);
          }
          replyResult.push(route);
        }
      });
      if (base) {
        return replyResult;
      } else {
        allowedRouter = allowedRouter.concat(replyResult);
      }
    };
    let originPath = deepcopy(fullRoutes);
    findLocalRoute(originPath);
    return allowedRouter;
  }

  /**
   * signin
   */
  public signin(callback?: () => void, data?: any) {
    let user = Cookie.get('p_token');
    let userId = Cookie.get('p_userId');
  }

  // 登录后重定向页面
  private loginDirect({
    newPath,
    data
  }: {
    newPath?: string;
    data?: any;
  }): void {
    this.$router.push(newPath || 'Home');
    this.signin(() => {}, data);
  }

  private logoutDirect() {
    sessionStorage.removeItem("token");
  }

}
</script>


<style lang="less">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

.progress-container {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: #00000011;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  .progress {
    width: 12rem;
    height: 12rem;
    border-radius: 2rem;
    background: #8b8b8bad;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
}
</style>
